<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="汇报时间" prop="dailyTime">
                <el-date-picker clearable v-model="queryParams.dailyTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择日报的汇报时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="汇报主题" prop="reportTopic">
                <el-input v-model="queryParams.reportTopic" placeholder="请输入汇报主题" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="项目编号" prop="projectId">
                <el-input v-model="queryParams.projectId" placeholder="请输入项目编号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="项目负责人" prop="projectLeader">
                <el-input v-model="queryParams.projectLeader" placeholder="请输入项目负责人" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="计划编号" prop="planId">
                <el-input v-model="queryParams.planId" placeholder="请输入计划编号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="计划开始时间" prop="planTime">
                <el-date-picker clearable v-model="queryParams.planTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择计划开始时间">
                </el-date-picker>
            </el-form-item> -->
            <!-- <el-form-item label="实际开始时间" prop="realityTime">
                <el-date-picker clearable v-model="queryParams.realityTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择实际开始时间">
                </el-date-picker>
            </el-form-item> -->
            <!-- <el-form-item label="计划内容描述" prop="planDese">
                <el-input v-model="queryParams.planDese" placeholder="请输入计划内容描述" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <!-- <el-form-item label="今日完成工作的境况" prop="todayEvolve">
                <el-input v-model="queryParams.todayEvolve" placeholder="请输入今日完成工作的境况" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <!-- <el-form-item label="今日工作的时间" prop="todayTime">
                <el-date-picker clearable v-model="queryParams.todayTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择今日工作的时间">
                </el-date-picker>
            </el-form-item> -->
            <el-form-item label="完成状态" prop="completeState">
                <el-input v-model="queryParams.completeState" placeholder="请输入完成状态" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="反馈时间" prop="feedbackTiem">
                <el-date-picker clearable v-model="queryParams.feedbackTiem" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择反馈时间">
                </el-date-picker>
            </el-form-item> -->
            <!-- <el-form-item label="备注" prop="notes">
                <el-input v-model="queryParams.notes" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:daily:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:daily:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete" v-hasPermi="['system:daily:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:daily:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="dailyList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="日报的id" align="center" prop="dailyId" />
            <el-table-column label="日报的汇报时间" align="center" prop="dailyTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.dailyTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="汇报人" align="center" prop="projectLeader" />
            <el-table-column label="汇报主题" align="center" prop="reportTopic" />
            <el-table-column label="项目名称" align="center" prop="projectName" />
            <el-table-column label="项目编号" align="center" prop="projectId" />
            <el-table-column label="项目负责人" align="center" prop="projectLeader" width="100" />
            <el-table-column label="计划编号" align="center" prop="planId" />
            <el-table-column label="计划开始时间" align="center" prop="planTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.planTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="实际开始时间" align="center" prop="realityTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.realityTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="计划内容描述" align="center" prop="planDese" width="100" />
            <el-table-column label="今日完成工作" align="center" prop="todayEvolve" width="100" />
            <el-table-column label="今日工作时间" align="center" prop="todayTime" width="180">
                <!-- <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.todayTime, '{y}-{m}-{d}') }}</span>
                </template> -->
            </el-table-column>
            <el-table-column label="计划完成状态" align="center" prop="completeState" width="100" />
            <el-table-column label="主送人" align="center" prop="mainSender" />
            <el-table-column label="抄送人" align="center" prop="copyPeople" />
            <el-table-column label="反馈人" align="center" prop="feedbackPeople" />
            <el-table-column label="反馈时间" align="center" prop="feedbackTiem" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.feedbackTiem, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="反馈内容" align="center" prop="feedbackContent" />
            <el-table-column label="备注" align="center" prop="notes" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:daily:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:daily:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改每日日报汇总对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="汇报主题" prop="reportTopic">
                            <el-input v-model="form.reportTopic" placeholder="请输入汇报主题" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="汇报时间" prop="dailyTime">
                            <el-date-picker clearable v-model="form.dailyTime" type="date"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择日报的汇报时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目编号" prop="projectId">
                            <el-select v-model="form.projectId" placeholder="请选择计划ID" @change="updateSelectedUser">
                                <el-option v-for="item in maintenList" :key="item.projectId" :label="item.projectId"
                                    :value="item.projectName">
                                    <span style="float: left">{{ item.projectId }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.projectName
                                        }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="计划编号" prop="planId">
                            <el-input disabled v-model="form.planId" placeholder="请输入计划编号" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目负责人" prop="projectLeader">
                            <el-input disabled v-model="form.projectLeader" placeholder="请输入项目负责人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="计划内容描述" prop="planDese">
                            <el-input v-model="form.planDese" placeholder="请输入计划内容描述" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="计划开始时间" prop="planTime">
                            <el-date-picker disabled clearable v-model="form.planTime" type="date"
                                value-format="yyyy-MM-dd" placeholder="请选择计划开始时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="实际开始时间" prop="realityTime">
                            <el-date-picker disabled clearable v-model="form.realityTime" type="date"
                                value-format="yyyy-MM-dd" placeholder="请选择实际开始时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="今日工作境况" prop="todayEvolve">
                            <el-input v-model="form.todayEvolve" placeholder="请输入今日完成工作的境况" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="今日工作时间" prop="todayTime">
                            <el-date-picker clearable v-model="form.todayTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择今日工作的时间">
                                <el-input v-model="form.todayTime" placeholder="请输入数字如1,就是一小时" />
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="计划状态" prop="completeState">
                            <el-select v-model="form.completeState" placeholder="请选择项目状态">
                                <el-option v-for="dict in dict.type.pro_daily_status" :key="dict.value"
                                    :label="dict.label" :value="parseInt(dict.value)"></el-option>
                            </el-select>
                            <!-- <el-input v-model="form.completeState" placeholder="1未开始 2开展中 3完成中" /> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="反馈时间" prop="feedbackTiem">
                            <el-date-picker clearable v-model="form.feedbackTiem" type="date"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择反馈时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="主送人" prop="mainSender">
                            <el-input v-model="form.mainSender" placeholder="请输入主送人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="抄送人" prop="copyPeople">
                            <el-input v-model="form.copyPeople" placeholder="请输入抄送人" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="反馈人" prop="feedbackPeople">
                            <el-input v-model="form.feedbackPeople" placeholder="请输入反馈人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="notes">
                            <el-input v-model="form.notes" placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="反馈内容">
                    <editor v-model="form.feedbackContent" :min-height="192" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listMainten
} from "@/api/system/mainten";
import {
    listDaily,
    getDaily,
    delDaily,
    addDaily,
    updateDaily
} from "@/api/system/daily";
import {
    listTeam
} from "@/api/system/team"

export default {
    name: "Daily",
    dicts: ['pro_daily_status'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 每日日报汇总表格数据
            dailyList: [],
            // 项目计划表格数据
            maintenList: [],
            //项目团队表格数据
            team: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                dailyTime: null,
                reporter: null,
                reportTopic: null,
                projectName: null,
                projectId: null,
                projectLeader: null,
                planId: null,
                planTime: null,
                realityTime: null,
                planDese: null,
                todayEvolve: null,
                todayTime: null,
                completeState: null,
                mainSender: null,
                copyPeople: null,
                feedbackPeople: null,
                feedbackTiem: null,
                feedbackContent: null,
                notes: null

            },
            // 表单参数
            form: {},
            // 表单验证
            rules: {
                reportTopic: [
                    { required: true, message: "汇报主题不能为空", trigger: "blur" },
                    { min: 2, max: 20, message: '汇报主题长度必须介于 2 和 20 之间', trigger: 'blur' }
                ],
                dailyTime: [
                    { required: true, message: "汇报时间不能为空", trigger: "blur" }
                ],
                projectId: [
                    { required: true, message: "项目编号不能为空", trigger: "blur" }
                ],
                todayEvolve: [
                    { required: true, message: "今日工作情况不能为空", trigger: "blur" }
                ],
                todayTime: [
                    { required: true, message: "今日工作时间不能为空", trigger: "blur" }
                ],
                completeState: [
                    { required: true, message: "计划状态不能为空", trigger: "blur" }
                ],
                mainSender: [
                    { required: true, message: "主送人不能为空", trigger: "blur" }
                ],
                copyPeople: [
                    { required: true, message: "抄送人不能为空", trigger: "blur" }
                ],
            },
        };
    },
    created() {
        this.getList();
        this.getPlanList();
        this.teamList();
    },
    methods: {
        // 获取项目信息
        updateSelectedUser(selectedDuty) {
            // 根据选中的计划名字查找对应的信息
            const selectedUser = this.maintenList.find(plan => plan.projectName === selectedDuty);
            if (selectedUser) {
                // 更新表单中的的信息
                this.form.projectId = selectedUser.projectId
                this.form.planId = selectedUser.projectId
                this.form.projectLeader = selectedUser.userId
                this.form.planDese = selectedUser.planWorkContent
                this.form.planTime = selectedUser.startTime
                this.form.realityTime = selectedUser.formalTime
                this.form.projectName = selectedUser.projectName
                console.log(selectedUser);
            } else {
                // 如果没有找到匹配的用户（理论上不应该发生，除非数据不一致），可以重置表单字段或进行错误处理  
                console.error(`未找到责任人为 "${selectedDuty}" 的项目计划`);
                this.form.projectName = '';
                this.form.userId = '';
            }
        },
        /** 查询项目计划列表 */
        getPlanList() {
            this.loading = true;
            listMainten(this.queryParams).then(response => {
                this.maintenList = response.rows;
            });
        },
        /** 查询每日日报汇总列表 */
        getList() {
            this.loading = true;
            listDaily(this.queryParams).then(response => {
                this.dailyList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 查询项目团队列表
        teamList() {
            listTeam(this.queryParams).then(response => {
                this.team = response.rows[0].proTeamUserList;
                console.log(this.team)
            })
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                dailyId: null,
                dailyTime: null,
                reporter: null,
                reportTopic: null,
                projectName: null,
                projectId: null,
                projectLeader: null,
                planId: null,
                planTime: null,
                realityTime: null,
                planDese: null,
                todayEvolve: null,
                todayTime: null,
                completeState: null,
                mainSender: null,
                copyPeople: null,
                feedbackPeople: null,
                feedbackTiem: null,
                feedbackContent: null,
                notes: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.dailyId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加每日日报汇总";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const dailyId = row.dailyId || this.ids
            getDaily(dailyId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改每日日报汇总";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.dailyId != null) {
                        updateDaily(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addDaily(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const dailyIds = row.dailyId || this.ids;
            this.$modal.confirm('是否确认删除每日日报汇总编号为"' + dailyIds + '"的数据项？').then(function () {
                return delDaily(dailyIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/daily/export', {
                ...this.queryParams
            }, `daily_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>